const host = "http://localhost:8080/pms" ;

// 第三：创建 Vue 实例 - 并设置相关的选项（属性）
let vm = new Vue({
    // 选项一：绑定挂载点
    el:'#app',

    // 选项二：定义页面中需要的数据
    data:{
        // 存储数据列表
        productList:[] ,

        // 双向绑定，展示/获取表单数据
        product:{},

        // 控制是否为修改表单
        isUpdate:false,

        // 定义变量，记录修改行的下标索引
        updateIndex:-1,

        // 定义数组，用于双向绑定复选框，从而获取要删除的数据
        selectRows:[],

        // 是否全选
        selectAll:false
    },
    // 选项三：定义页面中需要的函数 - 响应事件
    methods:{
        // 传统函数定义 - 删除商品
        delProduct:function(pid,index) {
            if(confirm('您真的要删除此数据吗？')) {
                removeProduct(pid,index,this) ;
            }
        },

        // ES6新特性 - 显示修改商品
        edit(p,index) {
            // 设置 isUpdate 变量为 true，显示标题为“修改商品”
            this.isUpdate = true ;

            // 创建一个新的对象，避免数据修改实时性
            let cloneProduct = Object.assign({}, p)

            // 赋值给双向绑定的数据 - 解决：修改表单数据不会影响表格的原始数据
            this.product = cloneProduct;

            // 存储当前修改数据行的下标索引
            this.updateIndex = index
        },

        // 清空表单数据，设置标题为 “添加商品” 
        cls() {
            // 设置 isUpdate 变量为 false，显示标题为“添加商品”
            this.isUpdate = false ;

            // 设置双向绑定的数据为空对象，绑定的表单数据就清空了
            this.product = {}

            // 设置商品编号的文本框获取焦点
            this.$refs.pid.focus() ;
        },

        // 实现修改商品 、 添加商品
        save() {
            if(this.isUpdate == true) {
                updateProduct(this) ;
                return ;
            }

            addProduct(this) ;
        },

        // 批量删除
        delMore() {
            delMoreProduct(this) ;
        },

        quanXuan() {
            if(this.selectAll) {
                this.selectRows = this.productList.map(p=>p.id) ;
            } else {
                this.selectRows = [] ;
            }
        }
    },
    // 选项四：定义侦听器 - 侦听某数据是否发生改变，如果改变则可以执行一些处理
    watch:{
        selectRows(){
            this.selectAll = this.productList.length == this.selectRows.length ;
        }
    },
    // 选项五：计算属性 
    computed:{
        // 定义计算属性，实现计算总价
        total() {
            let s = 0 ;
            for(let i=0;i<this.productList.length;i++) {
                s = s + this.productList[i].count *  this.productList[i].price ;
            }
            return s ;
        }
    },
    // 选项六：定义过滤器，实现的数据进行加工处理后，再输出
    filters:{
        moneyFilter(money,type,n) {
            // 转换为数值类型
            money = money * 1
            return type + money.toFixed(n) ;
        }
    },
    // 生命周期 - 勾子函数：表示生命周期的各个阶段 - 每个阶段都有相应的处理
    mounted:function() {
        // this 表示当前的 Vue 实例对象 - this.xxx 
        getAllProduct(this) ;
    }
}) ;

/**
 * 发起异步请求，拉取后台数据库中所的商品信息
 * @param that Vue实例对象
 */
function getAllProduct(that) {
    $.ajax({
        url:host + '/api/product/QueryAllServlet',
        method:'GET',
        success:function( res ) {
            that.productList = res.data ;
        }
    }) ;
}

/**
 * 删除商品
 * @param {productId} 商品编号 
 * @param {index} productList 数组下标索引 
 * @param {that} Vue实例对象
 */
function removeProduct(productId,index,that) {
    $.ajax({
        url:host + '/api/product/DeleteServlet',
        method:'GET',
        data:{
            pid:productId
        },
        success:function( res ) {

            // 删除成功
            if(res.code==200) {
                // 删除 ProductList 数组的元素，更新表格
                that.productList.splice(index,1) ;
                alert("删除成功") ;
                return ;
            }

            alert("删除失败") ;
        }
    }) ;
}


/**
 * 修改商品
 * @param {that} Vue实例对象
 */
function updateProduct(that) {
    $.ajax({
        url:host + '/api/product/UpdateServlet',
        method:'POST',
        data:that.product,
        success:function( res ) {
            // 修改成功
            if(res.code == 200) {
                // 把当前修改的数据行删除，并替换为修改的数据
                that.productList.splice(that.updateIndex,1,that.product) ;
                
                // 清空表单，还原添加表单
                that.cls() ;

                alert("修改成功") ;
                return ;
            }

            alert("修改失败") ;
        }
    }) ;
}

/**
 * 添加商品
 * @param {that} Vue实例对象
 */
function addProduct(that) {
    $.ajax({
        url:host + '/api/product/AddServlet',
        method:'POST',
        data:that.product,
        success:function( res ) {
            // 添加成功
            if(res.code == 200) {
                // 把当前修改的数据行删除，并替换为修改的数据
                that.productList.push(that.product) ;
                
                // 清空表单，还原添加表单
                that.cls() ;

                alert("添加成功") ;
                return ;
            }

            alert("添加失败") ;
        }
    }) ;
}

/**
 * 批量删除商品
 * @param {that} Vue实例对象
 */
function delMoreProduct(that) {
    $.ajax({
        url:host + '/api/product/DeleteMoreServlet',
        method:'GET',
        data:{
            // [101,102,103] -> 101,102,103
            pids:that.selectRows.toString() 
        },
        success:function( res ) {
            // 批量删除成功
            if(res.code == 200) {
                // 重新查询数据，更新数据表
                getAllProduct(that) ;

                alert("删除成功") ;
                return ;
            }
            alert("删除失败") ;
        }
    }) ;
}
